<template>
  <div class="container">
    <h1>请选择您要处理的模块</h1>
    <div class="button-group">
      <button @click="handleClick('人员')">人员</button>
      <button @click="handleClick('设备')">设备</button>
      <button @click="handleClick('规程')">规程</button>
    </div>
    <p>{{ selectedModule }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedModule: "",
    };
  },
  methods: {
    handleClick(moduleName) {
      this.selectedModule = moduleName;
      // 这里可以添加处理逻辑，例如跳转到相应的页面或执行其他操作
      //假装有个注释
    },
  },
};
</script>

<style scoped>
.container {
  text-align: center;
  padding-top: 20px; /* 增加顶部padding */
}

.button-group button {
  margin-right: 10px;
  border-radius: 5px; /* 添加圆角边框 */
  background-color: lightseagreen; /* 设置背景颜色为浅绿色 */
  color: white; /* 设置文字颜色为白色 */
  font-size: 16px; /* 调整字体大小 */
  padding: 10px 20px; /* 调整内边距 */
  cursor: pointer; /* 改变鼠标指针形状 */
}

/* 添加悬停效果 */
.button-group button:hover {
  opacity: 0.8;
}
</style>
